<template>
  <view>
    <!-- 1.0 轮播图 -->
    <swiper
      indicator-dots
      autoplay
      circular
      indicator-active-color="#fff"
    >
      <block
        v-for="item in swiperdata"
        :key="item.goods_id"
      >
        <navigator
          :url="item.navigator_url">
            <swiper-item>
                <image :src="item.image_src"></image>
            </swiper-item>
         </navigator>
      </block>
    </swiper>
    <!-- 2.0 菜单 -->
    <view class="categories">
      <view
        v-for="(item,index) in catitems"
        :key="index"
        class="category-item"
      >
        <image :src="item.image_src" />
      </view>
    </view>
    <!-- 3.0 楼层数据 -->
    <view class="floor">
      <view
        v-for="(item,index) in floordata"
        :key="index"
      >
        <!-- 头部 -->
        <view class="floor-head">
          <image :src="item.floor_title.image_src" />
        </view>
        <!-- 内容 -->
        <view class="floor-body">
          <!-- 左边 -->
          <view class="floor-body-left">
            <image
              :src="item.product_list[0].image_src"
              alt=""
            />
          </view>
          <!-- 右边 -->
          <view class="floor-body-right">
            <view
              v-for="(subitem,index2) in item.product_list"
              :key="index2"
            >
              <view v-if="index2 > 0">
                <img
                  :style="{width:subitem.image_width+'rpx;'}"
                  class="floor-body-right-img"
                  :src="subitem.image_src"
                  alt=""
                />
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 4.0 底线 -->
    <view class="end-tips">
      <view class="iconfont icon-xiao"></view>
      <text class="bottomline">我是有底线的</text>
    </view>
    <!-- 5.0 回到顶部 -->
    <view
      @click="goToTop"
      v-show="isShowGoToTop"
    >
      <view class="to-top">
        <image src="/static/img/arrow_top@2x.png"></image>
        <text>顶部</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      swiperdata: [], // 轮播图
      catitems: [], // 分类数据
      floordata: [], //楼层数据
      isShowGoToTop: false //是否显示回到顶部
    }
  },
  onLoad() {
    // 获取首页轮播图数据
    this.getSwiperData()
    // 获取首页分类数据
    this.getCatitems()
    // 获取首页楼层数据
    this.getFloorData()
  },
  onUnload(){
      console.log("home destory...")
  },
  onPageScroll({ scrollTop }) {
    if (scrollTop > 100) {
      if (this.isShowGoToTop) return

      this.isShowGoToTop = true
    } else {
      if (!this.isShowGoToTop) return

      this.isShowGoToTop = false
    }
  },
  methods: {
    async getSwiperData() {
      const res = await this.$axios.get('home/swiperdata')

      this.swiperdata = res.data.message
    },
    async getCatitems() {
      const res = await this.$axios.get('home/catitems')

      this.catitems = res.data.message
    },
    async getFloorData() {
      const res = await this.$axios.get('home/floordata')

      this.floordata = res.data.message
    },
    // 回到顶部
    goToTop() {
      mpvue.pageScrollTo({
        scrollTop: 0,
        duration: 300
      })
    }
  }
}
</script>

<style lang="less" scoped>
swiper {
  width: 750rpx;
  height: 400rpx;

  image {
    width: 100%;
    height: 100%;
  }
}
.categories {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
  height: 150rpx;
  .category-item {
    width: 120rpx;
    height: 120rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.floor {
  margin-top: 20rpx;
  background-color: white;
  &-head {
    width: 750rpx;
    height: 59rpx;
    image {
      margin: 10rpx 0rpx 0rpx 10rpx;
      width: 100%;
      height: 100%;
    }
  }
  &-body {
    display: flex;
    padding: 20rpx 16rpx 10rpx 16rpx;
    &-left {
      width: 232rpx;
      height: 386rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    &-right {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      &-img {
        height: 188rpx;
        margin: 0 0 10rpx 10rpx;
      }
    }
  }
}
.end-tips {
  display: flex;
  height: 100rpx;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #888;
  .bottomline {
    margin-left: 5rpx;
  }
}
.to-top {
  width: 90rpx;
  height: 90rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  position: fixed;
  right: 40rpx;
  bottom: 50rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  image {
    width: 24rpx;
    height: 14rpx;
  }
  text {
    margin-top: 20rpx;
    color: #999;
  }
}
</style>
